// reset 第一步样式重置
* {
  box-sizing: border-box;  // 必须要加的盒模型属性
  outline: none;
}

html {
  font-size: 13px;
}

body {
  margin: 0;  //body 有个默认的margin 8 像素
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.2em; 
  background: #f1f1f1;
}

a {
  color: #999;
}


// color 网站主要用到的颜色

$colors: (
  'primary': #db9e3f,  // 主题色
  'white': #fff, // 如果遇到属性名和颜色冲突，建议用引号区分
  'black': #000,
  'light': #f9f9f9,
  'grey': #999,
  'dark-1': #343440,
  'dark': #222,
);

// @each 循环方式
@each $colorKey, $color in $colors {
  // 文字颜色
  .text-#{$colorKey} {
    color: $color;
  } 
  // 背景色
  .bg-#{$colorKey} {
    background-color: $color;
  }
}

@each $var in (left, center, right){
  .text-left {
    text-align: $var;  
  }
}

// font size 字体
$base-font-size: 1rem; // 13/13
$font-sizes: (
  xs: 0.7692, //10px  10/13=0.7692
  sm: 0.9231, //12px  12/13
  md: 1, //13px
  lg: 1.0769, //14px  14/13
  xl: 1.2308, //16px  16/13
);  //记得加冒号结束

@each $sizeKey, $size in $font-sizes {
  .fs-#{$sizeKey} {
    font-size: $size * $base-font-size;
  }
}

// flex 布局 主轴和交叉轴对齐方式
.d-flex {
  display: flex;
}

.flex-column {
  flex-direction: column;  //从上到下的布局
}

$flex-js: (
  start: flex-start,
  end: flex-end,
  center: center,
  between: space-between,
  around: space-around,
);

@each $key, $value in $flex-js {
  .jc-#{$key} {
    justify-content: $value;
  }
}

$flex-ai: (
  start: flex-start,
  end: flex-end,
  center: center,
  stretch: stretch,
);

@each $key, $value in $flex-ai {
  .ai-#{$key} {
    align-items: $value;
  }
}

.flex-1 {
  flex: 1;
}

.flex-grow-1 {
  flex-grow: 1;
}

